<template>
  <div class="box">
    <span style="color: red">Instruction:</span> Innut a nene name or IniProt ID
    in the desionated field on the left side of the interface. <br />
    ID。 The right side displays corresponding metabolite information and HMDB
    IDs. This setup allows for easy navigation.and retrieval of detailed
    interaction data between proteins and metabolites, enhancing research and
    study.
  </div>

  <div style="margin-top: 30px; display: flex; justify-content: space-between">
    <div class="sd">
      <p class="title">Gene List</p>
      <div class="bx">
        <p>TP53</p>
        <p>TP53</p>
        <p>TP53</p>
        <p>TP53</p>
        <p>TP53</p>
        <p>TP53</p>
        <p>TP53</p>
        <p>TP53</p>
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 30px;
        "
      >
        <span> ID type :</span
        ><el-input
          style="width: 200px; margin-left: 10px"
          placeholder="请输入内容"
          v-model="input"
          clearable
        >
        </el-input>
      </div>
    </div>

    <div class="sd">
      <p class="title">Metabolite</p>
      <div class="bx">
        <p>TP53</p>
        <p>TP53</p>
        <p>TP53</p>
        <p>TP53</p>
        <p>TP53</p>
        <p>TP53</p>
        <p>TP53</p>
        <p>TP53</p>
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 30px;
        "
      >
        <span> ID type :</span
        ><el-input
          style="width: 200px; margin-left: 10px"
          placeholder="请输入内容"
          v-model="input"
          clearable
        >
        </el-input>
      </div>
    </div>
  </div>
  <div style="float: right; margin-top: 30px">
    <el-button type="primary">Submit</el-button>
  </div>
</template>
<style lang="scss" scoped>
.box {
  width: 100%;
  padding: 10px;
}
.sd {
  width: 45%;
  .title {
    text-align: center;
  }
  .bx {
    border: 1px solid #000;
    padding: 10px;
    p {
      cursor: pointer;
    }
  }
}
</style>
